<html>
  <head>
    <style>
      form.toggles {
        flow: row(label, toggle);
        border-spacing: 0.5em;
      }

      h2,
      label {
        width: max-content;
      }

      .hbox {
        flow: horizontal;
        border-spacing: 0.5em;
      }

      html {
        background: color(panel);
        color: color(panel-text);
      }
    </style>
  </head>

  <body>
    <h2>&lt;toggle> element demo</h2>

    <form .toggles>
      <label>With options:</label>
      <toggle (foo) checked>
        <option>No</option>
        <option>Yes</option>
      </toggle>
      <label>No options:</label>
      <toggle (bar) />
      <!--        <h2>A la radio (group)</h2>
    <label>A option:</label><toggle |radio(group) value="A" />
    <label>B option:</label><toggle |radio(group) value="B" />
    <label>C option:</label><toggle |radio(group) value="C" />-->
    </form>

    <h2>&lt;button> element</h2>

    <div .hbox>
      <button>Do it!</button>
      <button role="default-button">Default</button>
      <button disabled>Disabled</button>

      <button .success>Success</button>
      <button .warning>Warning</button>
      <button .danger>Danger</button>
    </div>

    <h2>&lt;radio> element</h2>

    <div .hbox>
      <radio (rgroup) checked value="true">Yes</radio>
      <radio (rgroup) value="false">No</radio>
      <radio (rgroup) value="null">Undefined</radio>

      <radio (rgroupd) disabled checked value="a">Disabled(Checked)</radio>
      <radio (rgroupd) disabled value="b">Disabled</radio>
    </div>

    <h2>&lt;checkbox> element</h2>

    <div .hbox>
      <checkbox checked>Foo</checkbox>
      <checkbox>Bar</checkbox>
      <checkbox mixed>Mixed</checkbox>

      <checkbox disabled checked value="a">Disabled(Checked)</checkbox>
      <checkbox disabled value="b">Disabled</checkbox>
    </div>

    <h2>&lt;editbox> element</h2>

    <div .hbox>
      <editbox value="foo" placeholder="input with content" />
      <editbox placeholder="input text here" />
      <editbox nullable placeholder="nullable" />
      <editbox disabled value="disabled" />
    </div>

    <h2>&lt;input|number> element</h2>
    <div .hbox>
      <input
        |number
        value="42"
        step="1"
        min="0"
        max="999"
        placeholder="number1"
      />
      <input |number placeholder="number2" step="1" min="0" max="999" />
      <input |number disabled step="1" min="0" max="999" />
    </div>

    <h2>&lt;select|dropdown> element</h2>
    <div .hbox>
      <select |dropdown novalue="dropdown">
        <option>Apple</option>
        <option>Apricot</option>
        <option>Currant</option>
        <option>Grapefruit</option>
        <option>Peach</option>
        <option>Pomegranate</option>
        <option>Tamarind</option>
      </select>

      <select |dropdown editable>
        <option>Apple</option>
        <option>Apricot</option>
        <option>Currant</option>
        <option>Grapefruit</option>
        <option>Peach</option>
        <option>Pomegranate</option>
        <option>Tamarind</option>
      </select>

      <select |dropdown novalue="disabled" disabled>
        <option>Apple</option>
        <option>Apricot</option>
        <option>Currant</option>
        <option>Grapefruit</option>
        <option>Peach</option>
        <option>Pomegranate</option>
        <option>Tamarind</option>
      </select>
    </div>

    <h2>&lt;slider&gt;</h2>

    <div .hbox>
      <slider min="0" max="100" value="50" />
      <slider disabled min="0" max="100" value="50" />
    </div>

    <h2>&lt;progress&gt;</h2>

    <div .hbox>
      0: <progress value="0" max="100" /> 50:
      <progress value="50" max="100" /> 100:
      <progress value="100" max="100" /> undetermined: <progress />
    </div>
  </body>
</html>
